<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Alone,Alone@an56.net">
<title>jquery-an-tab.js</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
  <hr>
  <div class="an-tab">
    <ul class="nav nav-tabs">
      <li class="an-tab-hd"><a href="javascript:;">Tab1</a></li>
      <li class="an-tab-hd"><a href="javascript:;">Tab2</a></li>
      <li class="an-tab-hd"><a href="javascript:;">Tab3</a></li>
      <li class="an-tab-hd"><a href="javascript:;">Tab4</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane an-tab-bd">1</div>
      <div class="tab-pane an-tab-bd">22</div>
      <div class="tab-pane an-tab-bd">333</div>
      <div class="tab-pane an-tab-bd">4444</div>
    </div>
  </div>
  <hr>
  <div class="an-tab" data-tab-event="mouseenter" data-tab-animate-time="500">
    <ul class="nav nav-tabs">
      <li class="an-tab-hd"><a href="javascript:;">Tab5</a></li>
      <li class="an-tab-hd"><a href="javascript:;">Tab6</a></li>
      <li class="an-tab-hd"><a href="javascript:;">Tab7</a></li>
      <li class="an-tab-hd"><a href="javascript:;">Tab8</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane an-tab-bd">5</div>
      <div class="tab-pane an-tab-bd">66</div>
      <div class="tab-pane an-tab-bd">777</div>
      <div class="tab-pane an-tab-bd">8888</div>
    </div>
  </div>
  <hr>
</div>
<script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="./jquery-an-tab.js"></script>
</body>
</html>